<template>
    <div class="header">

            <div class="user">
                <div style="height: 50px; margin-right: 20px">
                    <img :src="imgUrl" style="height: 100%">
                </div>
                <a-dropdown overlayClassName="drpBox">
                <div>
                    <span class="mrg10">你好：{{userInfo.username}}</span>
                    <DownOutlined type="down" style="font-size: 20px" ></DownOutlined>
                </div>
                    <template v-slot:overlay>
                        <a-menu @click="handleDptMenu" >
                            <a-menu-item key="overview" @click="toPage(1)"> 前往前台 </a-menu-item>
<!--                            <a-menu-item key="forget" @click="toPage(2)"> 商家中心 </a-menu-item>-->
<!--                            <a-menu-item key="forget" @click="toPage(2)"> 个人中心 </a-menu-item>-->
                            <a-menu-item key="logout" @click="toPage(3)"> 退出登录 </a-menu-item>
                        </a-menu>
                    </template>
                </a-dropdown>
            </div>


    </div>
</template>

<script>
import {defineComponent, toRefs, reactive, onMounted} from "vue";
import { DownOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import {apiUserLayout, getImgUrl} from "../../../api";
import {message} from "ant-design-vue";

export default defineComponent({
    name: "header",
    components: {DownOutlined},
    setup() {
        const router = useRouter()
        const state = reactive({
            userInfo: {},
            imgUrl: ''
        })
        const handleDptMenu = () => {

        }
        const toPage = (val) => {
            if (val == 1) {
                // apiUserLayout({}).then((res) => {
                //     if (res.data.code == 200) {
                //         // 清除缓存
                //         window.localStorage.removeItem('user')
                //         message.success('退出成功')
                //     }
                // })
                router.push('/overview')
            }
            if (val == 2) {
                // 跳转到修改密码页面
                // router.push('/userInfo')
            }
            if (val == 3) {
                // 退出登录，清除window.localStorage
                router.push('/login')
            }
        }
        // 获取信息
        const getInfo = () => {
            // 获取人员信息
            state.userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
            const params = {
                filename: state.userInfo.headPic
            }
            getImgUrl(params).then((res) => {
                console.log('图片',res.data)
                state.imgUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
                // console.log(88,state.imgUrl)
            })
        }

        //
        onMounted(()=> {
            getInfo()
        })
        return{
            handleDptMenu,
            toPage,
            ...toRefs(state)
        }
    }
})
</script>

<style lang="less" scoped>
.header{
    width: 100%;
    height: 50px;
    //justify-content: space-between;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    background: #fff;
    padding:0 15px;
    font-size: 20px;

    .user{
        display: flex;
        align-items: center;
    }
    //float: right;
    .mrg10 {
        padding-right: 10px;
    }
}
</style>
